/**
 * @file
 * @auth jinguangguo
 * @date 2016/12/7
 */
@import "./deposit/style";
@import "./withdraw/style";

.module-account-assets {
    line-height: 1;
    margin-top: -8px;

    .assets-active {
        //background-color: #e9e9e9;
        //background: linear-gradient(to right, #fff, #e9e9e9);

        border-bottom: 1px solid #000;
        transform: translateY(-4px);
        transition: transform .3s;
        color: #000;
        padding-bottom: 2px;

        &:after {
            content: ' ';
            display: block;
            width: 0;
            height: 0;

            border-width: 4px 4px 0;
            border-style: solid;
            border-color: #000 transparent transparent;
            position: absolute;
            top: 18px;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    //.asset-tab {
    //    display: flex;
    //    justify-content: space-between;
    //    align-items: center;
    //    box-sizing: border-box;
    //    height: 48px;
    //    font-size: 13px;
    //    border-bottom: 1px solid $color-item-hover;
    //    &-left {
    //        display: flex;
    //        height: 100%;
    //        .tab-item {
    //            display: flex;
    //            align-items: center;
    //            margin-right: 20px;
    //            border-bottom: 1px solid transparent;
    //            color: #a1a1a1;
    //            cursor: pointer;
    //            &.active {
    //                border-bottom: 1px solid #000;
    //                color: #000;
    //            }
    //            &:hover {
    //                color: #000;
    //                transition: all 0.4s ease;
    //            }
    //        }
    //        .tab-fork {
    //            position: relative;
    //            .hot {
    //                position: absolute;
    //                top: 13px;
    //                right: -40px;
    //                color: #fff;
    //                font-weight: bold;
    //                padding: 4px 8px;
    //                background-color: #1e97fc;
    //                transform: skew(-30deg,0) rotateX(10deg) scale(0.8);
    //            }
    //        }
    //    }
    //    &-right {
    //        cursor: default;
    //        font-size: 12px;
    //        .right-item {
    //            display: inline-block;
    //            vertical-align: middle;
    //            &-asset {
    //                margin-right: 4px;
    //                color: $color-font-gray;
    //                .asset-no {
    //
    //                }
    //            }
    //        }
    //    }
    //}
    .asset-head {
        display: flex;
        align-items: center;
        height: 48px;

        &-item {
            flex: 1;
            white-space: nowrap;
            text-align: right;
            color: #a1a1a1;

            &:first-child {
                margin-left: 24px;
                text-align: left;
                transform: translate(50px, 0);

            }

            &:last-child {
                flex: 2;
            }

            .input {
                height: auto;
                line-height: inherit;
                margin-left: 8px;
            }
        }

        .item-search {
            position: relative;

            .input {
                width: 132px;
                height: 28px;
                border-radius: 24px;
                padding: 0 12px;
                margin-right: 32px;
                box-shadow: 0 0 16px 0 #eaeaea;
            }

            .icon-search {
                position: absolute;
                right: 40px;
                top: 6px;
                color: #cccdcd;
                font-size: 16px;
            }
        }
    }

    .asset-content {
        .link {
            margin-right: 32px;
            color: #cccccc;
            cursor: default;

            &-enable {
                color: #181818;
                cursor: pointer;

                .icon-deposit {
                    color: #17a21d;
                    opacity: 0.4;
                }

                .icon-withdraw {
                    color: #ff4622;
                    opacity: 0.4;
                }

                &:hover {
                    color: #555555;

                    .icon-deposit {
                        opacity: 1;
                    }

                    .icon-withdraw {
                        opacity: 1;
                    }
                }
            }

            &-no-transition {
                transition: none;
            }
        }

        .title {
            font-weight: normal;
        }

        .assets-text {
            display: inline-block;
        }

        .assets-box {
            .popover-body {
                width: auto;
            }

            .list {
                display: flex;
                padding: 2px 0;

                .item {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    color: #a1a1a1;

                    &:nth-child(1) {
                        margin-left: 24px;
                        display: flex;
                        justify-content: flex-start;

                        .icon {
                            width: 28px;
                            height: 28px;
                            background-image: url('../../../img/dfp.png');
                            background-position: center;
                            background-repeat: no-repeat;
                            background-size: contain;

                            @each $coin in btc,
                            all,
                            apa,
                            eth,
                            cfc,
                            dabt,
                            mae,
                            moac,
                            mskc,
                            ntcc,
                            swtc,
                            tcc,
                            wkt,
                            udc,
                            ltc,
                            act,
                            smc,
                            let,
                            omg,
                            eos,
                            btm,
                            tv,
                            usc,
                            ogc,
                            bcd,
                            bch,
                            bchc,
                            bta,
                            btd,
                            btg,
                            lbtc,
                            sbtc,
                            abtc,
                            bck,
                            btp,
                            yoyow,
                            trx,
                            ipt,
                            cbtc,
                            bcx,
                            ssc,
                            emo,
                            etf,
                            etg,
                            bth,
                            sltc,
                            lts,
                            aac,
                            kcash,
                            btf,
                            lch,
                            usdt,
                            smcf1,
                            vca,
                            hmc,
                            gto,
                            wtc,
                            storj,
                            salt,
                            topc,
                            appc,
                            aec,
                            iep,
                            noa,
                            gbk,
                            aos,
                            pdtc,
                            call,
                            vollar,
                            crl,
                            dusd {
                                &.coin-#{$coin} {
                                    background-image: url('../../../img/#{$coin}@2x.png');
                                    background-position: center;
                                    background-repeat: no-repeat;
                                    background-size: contain;
                                }
                            }
                        }
                    }

                    &:last-child {
                        flex: 2;

                        .ui-btn {
                            height: 30px;
                            line-height: 30px;
                        }
                    }

                    .strong {
                        color: #000;
                    }

                    .em {
                        color: $color-font-gray;
                    }

                    .assets-text {
                        color: #cccdcd;
                        text-align: right;
                    }

                    .unit {
                        padding-left: 24px;
                        font-style: normal;
                        color: #000;
                    }
                }

                &:hover {
                    background-color: #f8f8f8;
                    transition: all 0.4s ease;
                }
            }
        }
    }

    .asset-total {
        color: $color-font-gray;
        margin: 30px 0 24px 0;

        &-item {
            position: relative;
            color: #000;
            font-weight: bold;

            .icon {
                position: absolute;
                right: 8px;
                top: 4px;
                color: #cccdcd;
            }
        }

        &-tip {
            margin-left: 4px;
        }
    }
}